<template>
    <div class="selectDate">
        <div class="drapSelect">
            <el-dropdown :style="{width:labelWidth}" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{currentSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="item in beforeList" :key="item.value" :command="item.label">{{item.label}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-date-picker
            v-model="dateList"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="clearable"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
    </div>
</template>
<script>
export default {
    data(){
        return{
           currentSelect:'',
           dateList:[],
           defaultValueDate:[]
        }
    },
    props:{
        beforeList:{
            type:Array,
            default:()=>{return []}
        },
        clearable:{
            type:Boolean,
            default:false,
        },
        defaultValue:{
            type:Array,
            default:()=>{return []}
        },
        labelWidth:{
            type:String,
            default:'100px'
        }
    },
    watch:{
        beforeList:{
            handler:function(val){
                this.selectLeftItem=val[0].value;
            },
            deep:true,
        },
        defaultValue:{
            handler:function(val){
               this.defaultValueDate=val;
            },
            deep:true,
        }
    },
    mounted(){
        this.currentSelect=this.beforeList[0].label;
        this.$emit('changeCommand',this.currentSelect);
    },
    methods:{
        //左侧下拉框
        handleCommand(command){
           this.currentSelect=command;
           this.$emit('changeCommand',command);
        },
        //改变日期
        dateChange(val){
           this.$emit('dateChange',val)
        }
    }
}
</script>
<style lang="less" scoped>
.selectDate{
    display: flex;
}
</style>
<style lang="less">
.drapSelect{
    .el-dropdown{
        display: flex;
        justify-content: flex-end;
        padding-right: 12px;
        box-sizing: border-box;
    }
}
</style>